<!-- 角色列表 -->
<template>
  <div class="system-role-box">
    <div class="header">
      <router-link to="/dashboard/system/role/add">
        <el-button size="small" type="primary">添加角色</el-button>
      </router-link>
    </div>
    <div class="content">
      <el-table :data="roleList" style="width: 100%">
        <el-table-column label="#" width="100" type="index"></el-table-column>
        <el-table-column label="角色昵称" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.role_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色ID" width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色描述" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.desc?scope.row.desc:'暂无描述' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="roleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="roleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data () {
    return {
      roleList: []
    }
  },
  computed: {},
  created () {
    this.$http.getRoleList().then(res => {
      // console.log(res)
      if (res && res.data.code == 200) {
        this.roleList = res.data.data

      }    
    })
  },
  methods: {
    roleEdit (index, item) {
      this.$router.push("/dashboard/system/role/edit/"+item.id);
      
    },
    roleDelete (index, item) {
      // console.log('删除操作。。',row)
      this.$confirm("此操作将删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.removeRole({ id: item.id }).then(res => {
            console.log(res);
            if (res && res.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped lang="less">
.system-role-box {
  background: #fff;
  border-radius: 2px;
  .header {
    border-bottom: 1px solid #f6f6f6;
    button {
      margin: 20px 0px 10px 15px;
    }
  }
  .content {
    padding: 0 20px;
    .body {
      margin: 8px 0;
    }
  }
  .el-pagination {
    padding: 20px 0px 25px 15px;
    // text-align: center;
  }
}
</style>
